<template>
	<div class="foot-menu">
		
		<router-link to="#" tag="div" class="foot-menu-item" :class="isActive === 1 ? 'active': '' ">
			<i class="ion-ios-film"></i>
		</router-link>

		<router-link to="#" tag="div" class="foot-menu-item" :class="isActive === 2 ? 'active': '' ">
			<i class="ion-chatbox-working"></i>
		</router-link>

		<router-link to="#" tag="div" class="foot-menu-item" :class="isActive === 3 ? 'active': '' ">
			<i class="ion-icecream"></i>
		</router-link>

		<router-link to="#" tag="div" class="foot-menu-item" :class="isActive === 4 ? 'active': '' ">
			<i class="ion-android-person"></i>
		</router-link>
		
	</div>
</template>

<script>
	export default {
		name: 'foot-menu',
		props: {
			isActive: {
				type: Number,
				default: 1,
				required: false
			}
		},
		data () {
			return {

			}
		},
		
	}
</script>

<style lang="sass" scoped>
	$height: 50px;
	$background: #fff;
	$icon-color: #596990;
	$icon-active: #4A90E2;

	.foot-menu {
		position: fixed;
		bottom: 0;
		left: 0; right: 0;
		display: flex;
		justify-content: space-around;
		background: $background;
		border-top: 1px solid #ddd;

		.foot-menu-item {
			width: 25%;
			text-align: center;
			line-height: $height;

			i {
				color: $icon-color;
				font-size: 22px;
			}
		}
		.foot-menu-item.active {
			i {
				color: $icon-active;
				font-size: 26px;
			}
		}
	}
</style>